<template>
    <!-- 主聊天窗口 -->
    <v-card v-if="showCard" class="main-card" ref="cardRef">
        <v-card-title>与 {{ cardTitle }} 聊天</v-card-title>
        <v-infinite-scroll class="scrollable-content" :items="contactMessages" :onLoad="loadMoreData" side="start">
            <template v-slot:empty>
                <v-alert type="warning">No more items!</v-alert>
            </template>
            <v-card-text>
                <v-list two-line>
                    <v-list-item v-for="(message, index) in contactMessages" :key="index">
                        <v-row v-if="message.forward == 'forward-left'" style="height: 80px;">
                            <v-col style="flex-grow: 0;">
                                <v-avatar>
                                    <v-img :src="avatar"></v-img>
                                </v-avatar>
                            </v-col>
                            <v-col cols="11">
                                <div :class="message.forward">
                                    <v-card @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)"
                                        width="25%" height="67%" min-height="35px" elevation="0"
                                        style="background-color: rgb(137, 217, 97); font-family: Arial, Helvetica, sans-serif;">{{
                                            message.text }}</v-card>
                                </div>
                                <p v-if="showTime[index]">{{ message.time }}</p>
                            </v-col>
                        </v-row>
                        <v-row v-if="message.forward == 'forward-right'" style="height: 80px;">
                            <v-col cols="8"></v-col>
                            <v-col cols="3">
                                <div :class="message.forward">
                                    <v-card @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)"
                                        height="67%" min-height="35px" elevation="0"
                                        style="background-color: rgb(137, 217, 97); font-family: Arial, Helvetica, sans-serif;">{{
                                            message.text }}</v-card>
                                </div>
                                <p v-if="showTime[index]">{{ message.time }}</p>
                            </v-col>
                            <v-col>
                                <v-avatar>
                                    <v-img :src="myAvatar"></v-img>
                                </v-avatar>
                            </v-col>
                        </v-row>
                    </v-list-item>
                </v-list>
            </v-card-text>
        </v-infinite-scroll>
        <v-card-actions class="fixed-bottom">
            <v-text-field label="输入消息" v-model="newMessage"></v-text-field>
            <v-btn color="primary" @click="sendMessage">发送</v-btn>
        </v-card-actions>
    </v-card>
</template>
<script setup>
import { defineProps, defineEmits, watchEffect, ref, reactive } from 'vue';
import getCurrentTime from '@/utils/DateUtils';
import { onMounted, onUpdated } from 'vue';
// 接收父组件传递的属性
const props = defineProps({
    showCard: Boolean,
    avatar: String,
    cardTitle: {
        type: String,
        required: false
    },
    cardMessage: Array
});
const newMessage = ref('');
const cardRef = ref(null);
const myAvatar = "https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg";
const showTime = ref([]);
// 定义关闭卡片的事件
const emit = defineEmits(['close-card']);
const listRef = ref(null);
const contactMessages = ref([]);
const sendMessage = async () => {
    const sendMessage = []
    if (contactMessages.value) {
        // sendMessage.push({ name: 'my', index: contactMessages.value.length + 1, text: newMessage.value, time: getCurrentTime(), forward: 'forward-right' })
        contactMessages.value.push({ name: 'my', index: contactMessages.value.length + 1, text: newMessage.value, time: getCurrentTime(), forward: 'forward-right' })
    } else {
        sendMessage.push({ name: 'my', index: 1, text: newMessage.value, time: getCurrentTime(), forward: 'forward-right' })
        contactMessages.value = [...sendMessage]
    }
    console.log(contactMessages)
    newMessage.value = ""
}

onMounted(() => {
    console.log("初始化钩子")

});
onUpdated(() => {
    console.log("更新钩子")

    if (props.cardMessage) {
        contactMessages.value = props.cardMessage.sort((a, b) => {
            return a.index - b.index;
        }).slice(0, 7);
        showTime.value = new Array(props.cardMessage.length).fill(false)
        props.cardMessage.forEach(function (item) {
            if (item.forward === 'left') {
                item.forward = 'forward-left';
            } else if (item.forward === 'right') {
                item.forward = 'forward-right';
            }
        })
    } else {
        contactMessages.value = null
    }
})
// 加载更多数据的函数
const loadMoreData = ({ done }) => {
    // 这里可以实现加载更多数据的逻辑
    // 例如从服务器请求更多的数据
    // 假设这里有一个模拟的数据加载过程
    setTimeout(() => {
        if (contactMessages.value == null || contactMessages.value.length == props.cardMessage.length) {
            done('empty')
            return
        }
        contactMessages.value = contactMessages.value.concat(props.cardMessage.sort((a, b) => {
            return a.index - b.index;
        }).slice(contactMessages.value.length, contactMessages.value.length + 5));
        done('ok')
    }, 1000);
};
// 处理鼠标悬停事件
function handleMouseEnter(index) {
    showTime.value[index] = true;
}

function handleMouseLeave(index) {
    showTime.value[index] = false;
}

</script>

<style scoped>
.v-list-item-content:hover .v-list-item-subtitle {
    display: block;
}

.forward-left {
    position: relative;
    /* 添加相对定位 */
}

.forward-right {
    position: relative;
    /* 添加相对定位 */
}

.forward-right::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    right: -9px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(137, 217, 97);
}

.forward-left::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    /* 箭头靠左边 */
    top: 8px;
    left: -9px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(137, 217, 97);
}

.main-card {
    position: relative;
    /* 使内部元素可以相对于卡片进行绝对定位 */
    height: 95vh;
    /* 设定卡片的高度 */
}

.card-inner {
    position: relative;
    /* 使内部元素可以相对于卡片进行绝对定位 */
    height: 80%;
    /* 占据卡片全部高度 */
}

.scrollable-content {
    height: calc(80%);
    /* 高度减去底部动作栏的高度 */
    overflow-y: auto;
    /* 允许内容在Y轴上滚动 */
    /* 为底部动作栏预留空间 */
}

.fixed-bottom {
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 固定在底部 */
    width: 100%;
    /* 宽度占满 */
}
</style>